import React, { Component, useEffect, useState } from 'react'
// import Hello from './Hello'

interface Loading {
  loading: boolean
}

interface Greeting {
  name: string
}

function HelloHOC(props: Greeting) {
  const [count, setCount] = useState(0)
  const [text, setText] = useState<null | string>(null)
  useEffect(() => {
    if (count > 5) {
      setText('no more')
    }
  }, [count])

  async function postDownload(url:string, params: object) {
    const request = {
      body: JSON.stringify(params),
      method: 'POST',
      headers: {
        'Content-Type': 'application/json;charset=UTF-8',
      },
    }

    interface IResponceHeader {
      get: Function
    }

    const response = await fetch(url, request)
    const filename = (response.headers as IResponceHeader)
      .get('content-disposition')
      .split(';')[1]
      .split('=')[1]
    const blob = await response.blob()

    const link = document.createElement('a')
    link.download = decodeURIComponent(filename)
    link.style.display = 'none'
    link.href = URL.createObjectURL(blob)
    document.body.appendChild(link)
    link.click()
    URL.revokeObjectURL(link.href)
    document.body.removeChild(link)
  }

  return (
    <>
      <p>
        click count is {count}, {text}
      </p>
      <button
        onClick={() => {
          setCount(count + 1)
        }}
      >
        add count
      </button>
      <button onClick={() => {
        postDownload('/V3/Org/base/rule$m=upload', [1001166562277, 1001166562279, 1001166562288, 1001166562281, 1001166562282])
      }}>download file</button>
    </>
  )
}

export default HelloHOC
